<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
	<th:block th:include="include :: header('省市区列表')" />
	<style type="text/css">

		.selection{background: #d6d5d5;color: #ed5565;}

	</style>
</head>
<body class="gray-bg">
<div class="container-div">
	<div class="row">

		<div class="col-sm-12 select-table table-striped">
			<div class="col-sm-12 row" style="padding: 0; margin: 0;margin-top: 16px;">
				<from>
					<div class="form-group col-sm-4">
						<label for="areaName">区域名称</label>
						<input type="text" class="form-control" th:value="${area.areaName}" id="areaName" placeholder="区域名称">
						<input type="hidden" name="areaCode" th:value="${area.areaCode}" id="areaCode">
					</div>
					<div class="form-group col-sm-4">
						<label for="areaOfarea">区域所属大区</label>
						<select id="areaOfarea"  name="select" class="selectpicker show-tick form-control" data-live-search="false" data-actions-box="false">
						</select>
					</div>
					<div class="form-group col-sm-4">
						<label for="status">状态</label>
						<select id="status" name="select" th:value="${area.status}" class="selectpicker show-tick form-control" data-live-search="false" data-actions-box="false">
							　　<option value="0">启用</option>
							　　<option value="1">停用</option>
						</select>
					</div>

				</from>
			</div>

			<div class="col-sm-12 row" style="padding: 0">


				<div class="col-sm-4">
					<div id="areaProvince" class="transferBox col-sm-12" style="height: 500px;max-width: 400px;overflow-y: auto">
						<h3 class="unselectTitle" style="margin: 0;padding: 5px 0 10px 0;">区域省</h3>
						<table id="transferAreaProvinceTable"></table>
					</div>
				</div>

				<div class="col-sm-8" style="padding-right: 0;">

					<div class="col-sm-5">
						<div id="area1" class="transferBox col-sm-12" style="height: 500px;overflow-y: auto">
							<h3 class="unselectTitle" style="margin: 0;padding: 5px 0 10px 0;">选择区域</h3>
							<table id="areaTable1"></table>
						</div>
					</div>

					<div class="col-sm-2">
						<div style="height: 500px;text-align: center;padding-top:200px">
							<span onclick="addArea()" class="btn btn-default btn-primary"> 添 &nbsp; 加 </span>
							<br>
							<br>
							<span onclick="removeArea()" class="btn btn-default"> 删 &nbsp; 除 </span>

						</div>
					</div>

					<div class="col-sm-5">
						<div id="area2" class="transferBox col-sm-12" style="height: 500px;overflow-y: auto">
							<h3 class="unselectTitle" style="margin: 0;padding: 5px 0 10px 0;">选中区域</h3>
							<table id="areaTable2"></table>
						</div>
					</div>

				</div>

			</div>

		</div>
	</div>
</div>
<div th:include="include :: footer"></div>
<script th:inline="javascript">
    var editFlag = [[${@permission.hasPermi('system:city:edit')}]];
    var removeFlag = [[${@permission.hasPermi('system:city:remove')}]];
    var prefix = ctx + "system/city";
    var areaCode = $("#areaCode").val();

    var Province = [];
    var area1 = [];
    var area2 = [];
    var area2indexof = [];

    // Ajax 请求封装
    function http(url,type,data,callback) {
        $.ajax({
            url:url,
            type:type,
            data:data,
            cache:false,
            async:true,
            dataType:"json",
            success:function (response) {
                callback(response);
            },
            error:function (error) {
                console.log(error);
            }
        });
    }

    // 初始化省列表
    function initProvince(){
        // 省 列表
        $('#transferAreaProvinceTable').bootstrapTable({
            data:Province,
            rowStyle:function rowStyle(row, index){
                if (index == 0){
                    return {classes:'selection'}
                }else{
                    return '';
                }
            },
            columns: [
                {
                    field: 'no',
                    title: '序号',
                    // sortable: true,
                    sortable: false,//是否排序
                    align: "center",
                    width: 40,
                    formatter: function (value, row, index) {
                        return index + 1;
                    }
                }, {
                    field: 'name',
                    title: '省'
                }
            ],
            onClickRow:function (row,$element) {
                $('.selection').removeClass('selection');//移除class
                $($element).addClass('selection');//添加class

                // 获取所选省对应的市数据
                http(prefix + '/selectCity?proCode='+row.cityCode+'&areaCode='+areaCode,'get','',function (res) {
                    area1 = res;
                    $('#areaTable1').bootstrapTable('refreshOptions',{data:area1});
                });
            },
        });
    }

    // 初始化所选省对应的市
    function initArea1(){
        $('#areaTable1').bootstrapTable({
            data:area1,
            columns: [
                {
                    field : 'state',
                    checkbox:true,
                    formatter : function (value, row, index) {
                        if(area2indexof.indexOf(row.cityCode.toString()) >= 0){
                            return {
                                checked : true//设置选中
                            };
                        }
                    }
                },
                {
                    field: 'no',
                    title: '序号',
                    sortable: false,//是否排序
                    align: "center",
                    width: 40,
                    formatter: function (value, row, index) {
                        return index + 1;
                    }
                }, {
                    field: 'name',
                    title: '区'
                }
            ],
            onClickRow:function (row,$element) {
                $($element).toggleClass('selected');//添加class
                $($element).find("input:checkbox").trigger("click")
            },
        });
    }

    // 初始化已经选中的市
    function initArea2(){
        $('#areaTable2').bootstrapTable({
            data:area2,
            columns: [
                {
                    checkbox: true
                },
                {
                    field: 'no',
                    title: '序号',
                    sortable: false,//是否排序
                    align: "center",
                    width: 40,
                    formatter: function (value, row, index) {
                        return index + 1;
                    }
                }, {
                    field: 'cityName',
                    title: '区'
                }
            ],
            onClickRow:function (row,$element) {
                $($element).toggleClass('selected');//添加class
                $($element).find("input:checkbox").trigger("click")
            },
        });
    }

    // 添加区
    function addArea() {
        var ss =  $('#areaTable1').bootstrapTable('getSelections');
        ss.forEach(function (v) {
            if(area2indexof.indexOf(v.cityCode.toString())<0){
                area2.unshift({
                    cityCode: v.cityCode,
                    cityName: v.name,
                });
                area2indexof.unshift(v.cityCode.toString())
            }
        });
        $('#areaTable2').bootstrapTable('refreshOptions',{data:area2});
    }

    // 删除区
    function removeArea() {
        var ss =  $('#areaTable2').bootstrapTable('getSelections');
        ss.forEach(function (v) {
            var _index = area2indexof.indexOf(v.cityCode.toString())
            area2.splice(_index,1)
            area2indexof.splice(_index,1)
        });
        $('#areaTable2').bootstrapTable('refreshOptions',{data:area2});
    }

    // 异步操作
    new Promise(function (re) {
        // 获取所选省对应的市数据
        http(prefix + '/cityList?areaCode='+areaCode,'get','',function (res) {
            area2 = res;
            area2.forEach(function (v) {
                area2indexof.push(v.cityCode)
            });
            re()
            initArea2();
        });
    }).then(function (re) {
        // 获取省数据
        http(prefix + '/selectPro','get','',function (res) {
            Province = res;
            initProvince();

            // 获取所选省对应的市数据
            http(prefix + '/selectCity?proCode='+Province[0]['cityCode']+'&areaCode='+areaCode,'get','',function (res) {
                area1 = res;
                initArea1()
            });
        });

    }).catch(function (reason) {
        console.log(reason)
    })


    //区域所属大区
    http(prefix + '/selectPro','get','',function (res) {
        Province = res;
        initProvince();

        // 获取所选省对应的市数据
        http(ctx + '/system/area/list?areaCode='+areaCode,'post','',function (res) {

            var rows = res.rows;
            var option ='';
            rows.forEach(function (v) {
                if(v.use){
                    option += '<option selected value="'+v.areaCode+'">'+v.areaName+'</option>';
                }else{
                    option += '<option value="'+v.areaCode+'">'+v.areaName+'</option>';
                }

            });
            $("#areaOfarea").html(option);
            $("#areaOfarea").selectpicker('refresh');

        });
    });



    // 选中区域ajax请求
    function submitHandler(fun) {
        http(prefix+"/add","post",
            {
                cityCode:area2indexof.join(','),
                name:$("#areaName").val(),
                areaName:$("#areaOfarea").val(),
                status:$("#status").val(),
                areaCode:areaCode,
            },
            function(res){
                fun();
            }
        );
    }




</script>
</body>
</html>
